<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div:first-child {
        background-color: orange;
      }
      .box2 {
        background-color: orange;
      }
      .box {
        border: 2px solid black;
        background-color: red;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: aqua !important;
      }
      #box {
        width: 500px;
        background-color: purple;
      }

      section .art1 {
        color: blue;
      }
      .art1 {
        color: red;
      }

      li:last-child {
        border: none;
      }
      ul .item {
        float: left;
        list-style: none;
        padding: 0 30px;
        border-right: 1px solid black;
      }
      /* ul .lastItem {
        border: none;
      } */
    </style>
  </head>
  <body>
    <div class="box box2" id="box" style="background-color: gold">
      这是一个div元素
    </div>

    <section>
      <article class="art1">这是一个section里面的article元素</article>
    </section>

    <ul>
      <li class="item">11</li>
      <li class="item">22</li>
      <li class="item">33</li>
      <li class="item">44</li>
      <li class="item lastItem">55</li>
    </ul>
  </body>
</html>

<!-- 
  通配符            0000
  类型(元素)选择器   0001
  Class选择器     	0010
  id选择器	        0100
  伪类选择符	       0010
  包含选择符	为包含选择符的权重之和
  属性选择符	       0010
  伪元素选择符	     0001
  内联样式	         1000

  当css里面加上!important关键字，可以让权重变得最大
  自己的代码要尽可能地避免出现!important
  后期需要引入别人写的第三方库的时候，需要去修改样式又改不动的时候，考虑使用
 -->
